<template>
  <div class="search">
    <!-- 搜索框 -->
    <div class="searchtop">
      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        @input="searchInput"
        @search="search"
      >
      </van-search>
      <div class="cancel" @click="onCancel">取消</div>
    </div>
    <!-- 模糊查询模块 -->
    <template v-if="value">
      <div
        @click="divClick(index, item)"
        class="content"
        v-for="(item, index) in searchArr"
        :key="index"
      >
        <div>
          <van-icon name="search" />
          <span v-if="item" v-html="func(item)">
            {{ item }}
          </span>
        </div>
      </div>
    </template>
    <!-- 历史搜索模块 -->
    <template v-else>
      <div class="history">
        <van-cell title="历史记录">
          <template #right-icon>
            <van-icon name="delete-o" @click="deleteHistory" />
          </template>
        </van-cell>
      </div>
      <div class="historydata">
        <div
          v-for="(item, index) in history"
          class="item"
          :key="index"
          @click="search(item)"
        >
          {{ item }}
        </div>
      </div>
    </template>
  </div>
</template>

<script>
// 导入 网络请求api
import { getSearch } from '../../../api/search'
import debounce from '../../../utils/debounce'
// 导入local模块
import { localSet, localGet, localDel } from '../../../utils/mylocal'
export default {
  components: {},
  data () {
    return {
      value: '',
      searchArr: [],
      history: [],
      searchInput: null
    }
  },
  mounted () {
    this.history = localGet('history') ? localGet('history') : []

    this.searchInput = debounce.call(this, this.input, 200)
    console.log(this.searchInput)
  },
  methods: {
    // 输入获取模糊查询
    input (val) {
      this.searchArr = []
      getSearch(val).then(res => {
        this.searchArr = res.data.options
      })
    },

    // 点击取消重置value,隐藏搜索
    onCancel () {
      this.value = ''
    },
    // 保存历史记录
    divClick (index, item) {
      this.history.unshift(this.searchArr[index])
      console.log(new Set(this.history))
      this.history = [...new Set(this.history)]
      if (this.history.length > 5) {
        this.history.splice(5)
      }
      localSet('history', this.history)
      this.value = item
      this.$router.push(`/searchResult/${item}`)
    },
    // 删除历史记录
    deleteHistory () {
      localDel('history')
      this.history = []
    },
    // 点击搜索跳转
    search (item) {
      console.log(item)
      this.history.unshift(item)
      console.log(new Set(this.history))
      this.history = [...new Set(this.history)]
      if (this.history.length > 5) {
        this.history.splice(5)
      }
      localSet('history', this.history)
      this.$router.push(`/searchResult/${item}`)
    },
    func (item) {
      return item.replace(
        this.value,
        `<span style="color:red">${this.value}</span>`
      )
    }
  },
  computed: {},
  filters: {}
}
</script>

<style lang="less" scope>
.search {
  background-color: #f5f7f9;
  height: 100vh;
  .searchtop {
    display: flex;
    background-color: #3296fa;
    align-items: center;
    .van-search {
      flex: 14;
      background-color: #3296fa;
    }
    .cancel {
      font-size: 15px;
      color: #fff;
      flex: 2;
    }
  }

  .content {
    border-bottom: 1px solid #eee;
    font-size: 16px;
    background-color: #fff;
    div {
      height: 40px;
      display: flex;
      align-items: center;
      margin: 0 15px;
      span {
        margin-left: 10px;
        margin-top: 2px;
      }
    }
  }
  .history {
    margin-top: 10px;
    .van-icon {
      font-size: 24px;
    }
  }
  .historydata {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    .item {
      flex: 49%;
      font-size: 16px;
      padding: 10px 0;
      background-color: #fff;
      border-top: 1px solid #e8e8e8;
      border-right: 1px solid #e8e8e8;
    }
  }
}
</style>
